<template>
    <div>
      <div style="margin-bottom:10px">
       <div class="top-select">
          <h4 style="font-size:16px;">选择时间</h4>
         <el-date-picker
      v-model="currentMonth"
      style="margin:10px"
      type="month"
      placeholder="选择月份">
    </el-date-picker> 
    <el-button type="primary">查询</el-button>
    <el-button type="success">导出excel表</el-button>
    <el-button type="warning">打印</el-button>
       </div>

      </div>
     
         <el-row :gutter="20">
              <el-col :span="8">
                <h4>工时工资计算</h4>
                <p style="font-size:12px;color:#999999;">根据员工考勤自动计算工资，个性化调整需手动更改</p>
                <el-button class="count-button" type="primary">开始计算</el-button>
              </el-col>
              <el-col :span="8">
                <h4>计件工资计算</h4>
               <p style="font-size:12px;color:#999999">根据员工计件数量自动计算工资，个性化调整需手动更改</p>
                  <el-button class="count-button"  type="primary">开始计算</el-button>
              </el-col>
                <el-col :span="8">
                <h4>混合计算</h4>
               <p style="font-size:12px;color:#999999">根据员工工时及计件数量计算工资，个性化调整需手动更改</p>
                  <el-button class="count-button"  type="primary">开始计算</el-button>
              </el-col>
            </el-row>
            <br>
            <h4>详情列表</h4>
              <el-table style="margin:10px">
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="phone"
            label="类别"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="基本工资"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="age"
            label="加班工资"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="扣款"
            align="center"
          ></el-table-column>
              <el-table-column
            prop="idcard"
            label="奖金"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="idcard"
            label="应发工资"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="idcard"
            label="实发工资"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="idcard"
            label="状态"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="操作"
            align="center"
          >
           <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                @click="editHandle(scope.row)"
                circle
              ></el-button>
              <el-button
                type="danger"
                @click="deleteHandle(scope.row)"
                icon="el-icon-delete"
                circle
              ></el-button>
            </template>
          </el-table-column>
    </el-table>
     <el-pagination
          class="page-bottom"
          :page-size="currentPageSize"
          layout="prev, pager, next, jumper, ->, total"
          :total="totalCount"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    data(){
        return {
           currentMonth:'',
           dataForm:{}
        }
    }
}
</script>
<style lang="less" scoped>
.count-button {
  margin-top: 10px;
}
.top-select {
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>